import Page from "@src/components/Page";
import {
  IPackageInfo,
  PackageInfo,
  PackageVersionInfo,
} from "@src/services/client";
import clientInstance from "@src/services/instance";
import { Modal } from "bootstrap";
import {
  BootstrapIcon,
  BsButton,
  FcForm,
  FormControl,
  FormField,
  IFormInstance,
  Loading,
  SolidModal,
  Table,
  ValueAccessor,
} from "solid-fire-controls";
import { createResource, createSignal } from "solid-js";
import toast from "solid-toast";

const InstalledPackageList = () => {
  const [modal, setModal] = createSignal<Modal | undefined>(undefined);
  const [form, setForm] = createSignal<IFormInstance | undefined>(undefined);

  const load = () =>
    clientInstance.installed.getList().catch((err) => {
      toast.error(err.message);
      return [];
    });

  const [installedList, { mutate, refetch }] = createResource(load);
  const [loading, setLoading] = createSignal(false);

  const downloadFile = (id: string, version: string) => {

    setLoading(true);


  };
  const showVersions = (data: IPackageInfo) => {
    modal()?.show();

    setLoading(true);
    clientInstance.installed
      .getVersions(data.id!)
      .then((versions) => form()?.setValue(versions))
      .catch((err) => toast.error("加载失败"))
      .finally(() => setLoading(false));
  };

  return (
    <Page>
      <div>
        <div class="col-12">
          <div class="d-flex gap-3">
            <BsButton onClick={refetch}>刷新</BsButton>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <Loading show={installedList.loading}>
            <Table
              responsive
              datas={installedList()}
              columns={[
                {
                  type: "index",
                },
                {
                  name: "id",
                  label: "Package Id",
                },
                {
                  label: "Versions",
                  children(data, column, index) {
                    return (
                      <BootstrapIcon
                        icon="list"
                        onClick={() => showVersions(data)}
                      ></BootstrapIcon>
                    );
                  },
                },
              ]}
            ></Table>
          </Loading>
        </div>
      </div>

      <SolidModal onRef={setModal} onHidden={() => form()?.setValue([])}>
        <SolidModal.Header>
          <SolidModal.Title>已下载</SolidModal.Title>
          <SolidModal.CloseButton></SolidModal.CloseButton>
        </SolidModal.Header>
        <SolidModal.Body>
          <Loading show={loading()}>
            <FcForm onRef={setForm}>
              <FormField>
                <FormControl
                  control={(ctx: ValueAccessor<PackageVersionInfo[]>) => (
                    <Table
                      datas={ctx.value}
                      columns={[
                        { type: "index" },
                        { name: "version", label: "Version" },
                        {
                          label: " ",
                          children(data, column, index) {
                            return (
                              <BootstrapIcon
                                icon="download"
                                onClick={() =>
                                  downloadFile(data.id!, data.version!)
                                }
                              ></BootstrapIcon>
                            );
                          },
                        },
                      ]}
                    ></Table>
                  )}
                ></FormControl>
              </FormField>
            </FcForm>
          </Loading>
        </SolidModal.Body>
      </SolidModal>
    </Page>
  );
};

export default InstalledPackageList;
